import { Table } from 'antd';
import PropTypes from 'prop-types';

import styles from './DataTable.less';

const DataTable = function (props) {
  const { list, current, pageSize, total, loading, onOpenModal, onTableChange } = props
  // 定义分页对象
  const pagination = {
    total,
    current,
    pageSize
  }
  const handleTableChange = (pagination, filters, sorter) => {
    onTableChange(pagination, filters, sorter)
  }
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 200
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
      width: 100
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (text, record) => {
        return (
          <div>
            <a onClick={ () => onOpenModal(record.id) }>编辑</a>
            &nbsp;
            <a>删除</a>
          </div>
        )
      },
    }
  ]

  return (
    <div className={ styles.container }>
      <Table dataSource={ list } pagination={ pagination } rowKey={ record => record.id } loading={ loading }
             columns={ columns } onChange={ handleTableChange }/>
    </div>
  );
}

DataTable.propTypes = {
  list: PropTypes.array.isRequired,
  current: PropTypes.number.isRequired,
  pageSize: PropTypes.number.isRequired,
  total: PropTypes.number.isRequired,
  loading: PropTypes.bool.isRequired,
  onOpenModal: PropTypes.func.isRequired,
  onTableChange: PropTypes.func.isRequired,
};

export default DataTable
